<template>
    <el-aside class="menuMedia"  style="position: fixed;top: 0px;left: 0px;button:0px;z-index: 9;height: 100%;width: 20%;">
      <div style="padding-top: 70px;width: 100%;height: 100%;background-color: white">
        <el-avatar style="margin-left: 50%" src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"></el-avatar>
        <el-menu style="text-align: center;">
          <router-link to="/Main/file"> <el-menu-item>file</el-menu-item></router-link>
          <router-link to="/Main/modelShow"> <el-menu-item>model</el-menu-item></router-link>
<!--          <router-link to="/Main/villa"> <el-menu-item>villa</el-menu-item></router-link>-->
          <router-link to="/Main/threeDemo"> <el-menu-item>Demo</el-menu-item></router-link>
        </el-menu>
      </div>
    </el-aside>
</template>

<script>
  import {Avatar,Menu,MenuItem,Aside,Icon} from 'element-ui'
  export default {
    name: "MenuBar",
    components:{
      ElAvatar:Avatar,
      ElMenu:Menu,
      ElMenuItem:MenuItem,
      ElAside:Aside,
      ElIcon:Icon
    },
    data(){
      return{}
    },
    mounted() {
    },
    methods:{
      mentFalse(){
        document.getElementsByClassName("menuMedia")[0].style.transform= "translateX(0px)";
      },
      menuTrue(){
        document.getElementsByClassName("menuMedia")[0].style.transform= "translateX(-270px)";
      }
    }

  }
</script>

<style scoped>

</style>
